<template>
        <div class="msg-detail">
            <van-nav-bar fixed :z-index="100" title="消息" left-arrow @click-left="onClickLeft" />
            <div class="content" v-html='msg_html'>
                <!-- {{this.$route.params.content}} -->
            </div>
        </div>
    </template>
    
    <script>
        import { mapState } from 'vuex'
        import {
            Icon,
            Cell,
            Toast,
            Card,
            Button,
            NavBar
        } from 'vant'
        import Arrow from '@/components/vue-scroller/components/Arrow.vue'
        import storeNavBar from '@/components/store-nav-bar'
        import storeScroller from '@/components/store-scroller'
        import { isIOS } from 'mobile-device-detect'
        import msgListContent from './components/msgListContent'
        import service from '@/utils/service'
        import storeService from '@/components/store-service'
    
        export default {
            components: {
                [NavBar.name]: NavBar,
                Toast,
                Arrow,
                storeNavBar,
                storeScroller,
                msgListContent,
                storeService
            },
            computed: {
                // ...mapState({
                //   content: state => state.home.content
                // })
                ...mapState({
                    isLogin: state => state.user.isLogin,
                }),
            },
    
            data() {
                return {
                    msg_html: '<h1>aaa</h1>',
                }
            },
            created() {
                this.getData();
            },
            methods: {
                onClickLeft() {
                    this.$router.push('/msg')
                },
                getData() {
                    this.$http.post("sysMsg/msgDetail", {id:this.$route.params.id}).then(data => {
                        console.log('data',data)
                        this.msg_html = data.info.content;
    
                    }).finally((res) => {
                        // if (typeof callBack == 'function') callBack()
                    })
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .msg-detail {
            position: relative;
            overflow: auto;
            min-height: 100vh;
    
            .content {
                margin-top: 75px;
                padding: 0 15px;
    
                .sub-msg-card-box {
                    padding: 8px 0;
                    background: #fff;
                    border-radius: 6px;
    
                    .sub-msg-card {
                        /* background: #fff; */
                        display: flex;
                        padding: 8px 16px;
                        border-radius: 6px;
    
                        .pic-box {
                            width: 96px;
                            height: 96px;
                            margin-right: 12px;
                            background: red;
                            border-radius: 4px;
                        }
    
                        .sub-msg-content-box {
                            width: 219px;
    
                            .goods-name {
                                font-size: $font-size-normal;
                                color: $title-clr;
                                line-height: 16px;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
    
                            .sku-info {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 12px;
    
                                .sku-detail {
                                    font-size: $font-size-small;
                                    color: $text-clr;
                                }
    
                                .count {
                                    font-size: $font-size-normal;
                                    color: $gray-deep;
                                }
                            }
    
                            .price {
                                font-size: $font-size-normal;
                                color: $primary-clr;
                                margin-top: 12px;
                            }
                        }
                    }
                }
    
                .sub-logistics-info {
                    background: #fff;
                    margin-top: 10px;
                    padding: 0 16px;
                    border-radius: 6px;
    
                    .logistics-box {
                        display: flex;
                        align-items: center;
                        height: 46px;
                        border-bottom: solid thin #F8F8F8;
    
                        &:last-child {
                            margin-bottom: 0;
                        }
    
                        .logistics-title {
                            font-size: $font-size-normal;
                            color: $primary-clr;
                            margin-right: 12px;
                            flex-shrink: 0;
                        }
    
                        .logistics-content {
                            font-size: $font-size-small;
                            color: $text-clr;
                            word-break: break-all;
                            word-wrap: break-word;
                        }
                    }
    
                    /* div{
                  word-break:break-all;word-wrap:break-word;
                } */
                }
            }
    
            .msg-detail-bootom-bar {
                position: absolute;
                bottom: 0;
                background: #fff;
                height: 49px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 100%;
                padding: 0 15px;
    
                .service-btn {
                    border: 1px solid #FE472D;
                    border-radius: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #FE472D;
                    width: 90px;
                    height: 30px;
                }
    
                .sub-btn {
                    border: 1px solid #FE472D;
                    border-radius: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    background: #FE472D;
                    width: 90px;
                    height: 30px;
                    color: #fff;
                    margin-left: 12px;
                }
            }
        }
    </style>